<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css盒子模型-边框模型</title>
  <style>
    div{
      width: 300px;
      height: 100px;
      margin-bottom: 20px;
      text-align: center;
      line-height: 100px;
      background-color: lightyellow;
      color: red;
    }
    /*1. 对四个边框分别设置值*/
    .d1{
      /*1.1 设置盒子的上边框*/
      border-top: 10px solid red;
      /*1.2 设置盒子的右边框*/
      border-right: 8px dotted blue;
      /*1.3 设置盒子的下边框*/
      border-bottom: 6px double purple;
      /*1.4 设置盒子的左边框*/
      border-left: 4px dashed darkgreen;
    }
    /*2. 设置上、左右、下边框各自有三种样式(分别代表上、左右、下)*/
    .d2{
      border-color: blue red purple;      /*设置边框颜色*/
      border-width: 15px 10px 5px;        /*设置边框线条粗细*/
      border-style: solid dashed double;  /*设置边框样式*/
    }
    /*3. 设置上下、左右各自有三种样式（分别代表上下、左右边框样式相同）*/
    .d3{
      border-color: red blue;
      border-width: 10px 5px;
      border-style: double dashed;
    }
    /*4. 设置上右下左四个方向样式一样*/
    .d4{
      /*border-color: red;*/
      /*border-width: 10px;*/
      /*border-style: solid;*/
      /*可以简化为：*/
      border: red solid 10px ;
    }
  </style>
</head>
<body>
<div class="d1">
  分别设置盒子的四个边框
</div>
<div class="d2">
  分别设置上、左右、下边框的样式
</div>
<div class="d3">
  分别设置上下、左右边框的相同样式
</div>
<div class="d4">
  分别设置上右下左四个方向边框一样
</div>
</body>
</html>
